<template>
  <div class="menu-demo">
    <div class="menu">
      <a-space>
        <a-button type='outline' size="small" @click="router.push('/home')">
          主页</a-button>
        <a-button type='primary' size="small" @click="router.push('/exam')">
          <template #icon>
            <icon-pen-fill />
          </template>
          答题</a-button>
        <a-dropdown @select="handleAnalysis">
          <a-button type='primary' size="small" @click="router.push('/analysis')">
            <a-image :preview="false" width="15" height="25" class="headerIcon" :src="analysisIcon" />
            分析
          </a-button>
          <template #content>
            <a-doption>Option 1</a-doption>
            <a-doption disabled>Option 2</a-doption>
            <a-doption :value="{ value: 'Option3' }">Option 3</a-doption>
          </template>
        </a-dropdown>
        <a-dropdown @select="handleRank">
          <a-button size="small" style="background-color:var(--color-purple)" @click="router.push('/rank')">
            <a-image :preview="false" width="15" height="25" class="headerIcon" :src="rankIcon" />
            排名
          </a-button>
          <template #content>
            <a-doption>Option 1</a-doption>
            <a-doption disabled>Option 2</a-doption>
            <a-doption :value="{ value: 'Option3' }">Option 3</a-doption>
          </template>
        </a-dropdown>
        <a-button size="small" style="background-color:var(--color-yellow)" @click="router.push('/about')">
          <a-image :preview="false" width="15" height="25" class="headerIcon" :src="aboutIcon" />
          关于
        </a-button>
      </a-space>
      <div class="system-fun">
        <icon-pause-circle-fill v-if="music" :style="{ color: colorList[0] }" @click="musicStatus" />
        <icon-play-circle-fill v-else :style="{ color: colorList[0] }" @click="musicStatus" />
        <icon-customer-service :style="{ color: colorList[1] }" />
        <icon-thumb-up-fill :style="{ color: colorList[2] }" />
        <a-badge :count="9" dot color="#0FC6C2">
          <icon-notification :style="{ color: colorList[3] }" />
        </a-badge>
        <icon-settings :style="{ color: colorList[4] }" />
        <icon-english-fill :style="{ color: colorList[5] }" />
        <a-popover position="br">
          <icon-user :style="{ color: colorList[6] }" class="user" />
          <template #content>
            <div class="user-info" v-if="userInfo.name">
              <div><a-avatar :size="50" style="margin:auto">Arco</a-avatar></div>
              <div style="font-size: 24px;font-weight: bold;">Name</div>
              <div style="font-size: 12px;margin-top: -10px">
                <span style="color: gray;">卷币: </span><span class="dollar" style="padding-right: 10px;">1</span>
                <span style="color: gray">积分: </span><span class="dollar">2</span>
              </div>
              <p><span><i><icon-heart-fill /></i>发表/贡献</span>  <icon-right /></p>
              <p @click="router.push('/youSelf')"><span><i class="iconfont icon-waixingren"></i>个人中心</span> <icon-right /></p>
              <p><span><i><icon-pen /></i>反馈</span><icon-right /></p>
              <a-divider />
              <p ><span><i><icon-export /></i>退出登录</span><icon-right /></p>
            </div>
            <div class="un-login" v-else>
              <a-avatar>未登录</a-avatar>
              <a-divider />
              <p @click="router.push('/login')"><span>前往登录</span><icon-right /></p>
            </div>
          </template>
        </a-popover>
      </div>
    </div>
    <Bread />
    <AudioPlay :playControl="music"/>
  </div>
</template>

<script setup lang='ts'>
import { ref,reactive } from "vue";
import aboutIcon from "@/assets/header/icon/guanyu.svg"
import analysisIcon from "@/assets/header/icon/fenxi.svg"
import rankIcon from "@/assets/header/icon/paiming.svg"

import Bread from "@/components/bread.vue";
import AudioPlay from "./components/audioPlay.vue";
import { useRouter } from 'vue-router'

const colorList = ['#FFB6C1', '#FF6347', '#D2691E', '#6A5ACD', '#4169E1', '#00BFFF', '#48D1CC'].sort(()=>{
  return Math.random() - 0.5
})
const router = useRouter()
const userInfo = reactive({name:'sfsfassad'})
const music = ref(true)

const musicStatus = ()=>{
  music.value = !music.value
}

function handleAnalysis(){

}
function handleRank(){

}

</script>

<style lang="scss" scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
}

.menu {
  padding: 0 20px;
  display: flex;
  height: 44px;
  justify-content: space-between;
  align-items: center;

  button:hover {
    color: white;
  }
}

.system-fun {
  display: flex;
  width: 240px;
  justify-content: space-between;
  align-items: center;

  svg {
    font-size: 20px;
    cursor: pointer;
  }

  svg:hover {
    transform: scale(1.1);
  }
}

.headerIcon {
  margin-right: 6px;
}
.user-info{
  width: 220px;
}
.user-info , .un-login{
  p{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    padding: 15px;
    border-radius: 6px;
    font-size: 14px;
    span{
      display: flex;
      align-items: center;
      i{padding-right: 10px;}
      .iconfont{
        margin-left: -3px;
      }
    }
  }
  p:hover{
    background-color: rgba($color:gray, $alpha: 0.3);
  }
  text-align: center;
}
.dollar{
  color: black;
}
.un-login{
  padding: 10px;
}

</style>
